<template>
  <div class="viewColor">
    <div class="absolute" id="absoluteHeader">
      <div class="header">
        <img src="@/assets/images/return.png" class="header_img" @click="back"/>
        <div class="title">技术圈</div>
        <div class="my">我的</div>
      </div>
      <div class="swiper-container nav-container" id="nav">
        <div class="swiper-wrapper nav-wrapper">
          <div class="swiper-slide nav-slide text4">
            <span style="color:#8ec43e;">最新推荐</span></div>
          <div class="swiper-slide nav-slide text2">
            <span>专栏</span></div>
          <div class="swiper-slide nav-slide text4">
            <span>新闻动态</span></div>
          <div class="swiper-slide nav-slide text5">
            <span>自由工作行业</span></div>
          <div class="swiper-slide nav-slide text4">
            <span>学术研究</span></div>
        </div>
      </div>
    </div>
    <div class="swiper-container list" id="list">
      <div class="swiper-wrapper list-wrapper">
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
        <div class="swiper-slide list-slide">
          <div class="list-content">
            <div class="l_text">
              <div class="l_title">产品经理如何合理利用资源，快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样快速搭建可进行市场验证的产品小样</div>
              <div class="l_explain"><span class="l_tip">黎莉莉 | 2019.01.25</span><span class="l_tip">新闻动态</span></div>
            </div>
            <img class="l_img" src="@/assets/images/signing@2x.png"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * 技术圈
   */
  export default {
    name: "TechnologyCircle",
    data() {
      return {}
    },
    mounted() {

      var navSwiper = new Swiper('#nav', {
        slidesPerView: "auto",
        slidesOffsetAfter: 0,
        freeMode: true,
      })
      var listSwiper = new Swiper('#list', {
        direction: 'vertical',
        slidesPerView: 'auto',
        freeMode: true,
        slidesOffsetBefore: $('#absoluteHeader').height(),
        slidesOffsetAfter:$('#absoluteHeader').height(),
      })
    },
    methods: {
      back() {
        window.webkit.messageHandlers.TechnologyCircle.postMessage({});
      },
    }

  }
</script>

<style scoped>
  .absolute{
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
  }
  .viewColor {
    position: relative;
    height: 100%;
  }

  .nav-container {
    background-color: #ffffff;
  }

  .header {
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
  }

  .header_img {
    width: 17px;
    height: 30px;
  }

  .title {
    text-align: center;
    flex: 1;
    font-size: 30px;
    color: #ffff;
  }

  .my {
    font-size: 24px;
    color: #ffffff;
  }

  .nav-wrapper {
    height: 78px;
    padding: 0 5px;
  }

  .nav-slide {
    box-sizing: border-box;
    font-size: 28px;
    color: rgb(84, 84, 84);
    line-height: 78px;
    padding: 0 25px;
  }

  .text4 {
    width: 162px;
  }

  .text2 {
    width: 118px;
  }

  .text5 {
    width: 196px;
  }
  .list{
    position: relative;
    height: 100%;
  }
  .list-wrapper{

  }
  .list-slide {
    height: 210px;
    overflow: auto;
  }
  .list-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    padding: 40px 0px 30px 0px;
    margin: 0px 30px 0px 30px;
  }

  .list-content:not(:last-child) {
    border-bottom: 1px solid rgb(245, 238, 238);
  }

  .l_title {
    color: rgb(43, 43, 43);
    line-height: 36px;
    font-size: 28px;
    height: 72px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .l_explain {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .l_tip {
    font-size: 24px;
    color: rgb(153, 153, 153);
  }

  .l_text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 20px;
  }

  .l_img {
    flex-shrink: 0;
    width: 230px;
    height: 170px;
  }
</style>
